<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <h1>当前计数: {{counter}}</h1>
            <!-- <button v-on:click="counter++">+</button>
            <button v-on:click="counter--">-</button> -->
            <button v-on:click="add">+</button>
            <button @click="sub">-</button>
        </div>
        <script src="../../js/vue.js"></script>
        <script>
            const obj = {
                counter: 0
            }
            const pp = new Vue({
                el: '#app',
                data: obj,
                methods: {
                    add: function () {
                        console.log("add");
                        this.counter++;
                    },
                    sub: function () {
                        console.log("sub");
                        this.counter--;
                    }
                }
            })


        </script>
    </body>
</html>